<template>
  <div class="upload">
    <el-upload class="upload-demo" drag :action="$http+'/maintain/upload_culture_result_from_excel'" :limit="1"
      list-type="picture" accept=".xlsx" :auto-upload="false"
      :on-change="beforeUpload" :before-remove="beforeRemove"
      >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em>
        <p style="font-size: 80%;">只能上传<strong><em>xlsx</em></strong>格式文件且不超过10MB</p>
      </div>
    </el-upload>
    <div class="error-msg">
      <el-alert
          v-if="messageErr"
          :title="messageErr"
          type="error"
          show-icon>
      </el-alert>
      <el-alert
          v-else-if="messageSuccess"
          :title="messageSuccess"
          type="success"
          show-icon>
      </el-alert>
      <div v-else>错误展示区</div>
    </div>
    <div class="box">
      文化成绩上传/
      学龄前
      小学
      初中
      高中
      中专
      大专
      本科
      硕士
      博士
      博士后
      <table border="1" width="100%">
        <thead>
          <tr>
            <th>学期</th>
            <th>年级</th>
            <th>运动员</th>
            <th>考试科目</th>
            <th>考试成绩</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>2016年度上学期</td>
            <td>初中</td>
            <td>1</td>
            <td>语文</td>
            <td>99</td>
          </tr>
          <tr>
            <td>2016年度上学期</td>
            <td>初中</td>
            <td>1</td>
            <td>数学</td>
            <td>99</td>
          </tr>
          <tr>
            <td>2016年度上学期</td>
            <td>初中</td>
            <td>1</td>
            <td>外语</td>
            <td>99</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
  import {
    upload_culture_result_from_excel
  } from '@/api/person.js'
  export default {
    data() {
      return {
        messageErr: '',
        messageSuccess: '',
      }
    },
    methods: {
      beforeRemove(file) {
        this.messageErr = this.messageSuccess = ''
      },
      beforeUpload(file) {
        var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
        const extension2 = testmsg === 'xlsx'
        const isLt2M = file.size / 1024 / 1024 < 10
        if (!extension2) {
          this.messageErr = '上传文件只能是 xlsx格式!'
          return
        }
        if (file.size > 1024 * 1024 * 10) {
          this.messageErr = '上传文件太大!不能超过10M'
          return
        }
        let fileData = new FormData()
        fileData.append("file", file.raw);
        upload_culture_result_from_excel(fileData).then(res => {
          if (res.code === 200) {
            this.messageSuccess = '上传成功! '+res.message
          } else {
            this.messageErr = res.message
          }
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .upload {
    padding: 20px;
    position: relative;

    .upload-demo {
      display: flex;
      justify-content: space-between;
    }

    .error-msg {
      position: absolute;
      top: 20px;
      left: 200px;
      width: 60%;
      min-height: 300px;
      border: 1px solid #d8d8d8;
      background-color: #FFFFFF;
      border-radius: 4px;
    }

    .box{
      width: 100%;
      height: 300px;
      margin-top: 100px;
      table{
        border-collapse: collapse;
        text-align: center;
        tr th{
          width: 20%;
        }
      }
    }
  }
  table.formdata {
   border: 1px solid #5F6F7E;
   border-collapse: collapse;
  }
  table.formdata th {
   border: 1px solid #5F6F7E;
   background-color: #E2E2E2;
   color: #000000;
   text-align: left;
   font-weight: normal;
   padding: 2px 4px 2px 4px;
   margin: 0;
  }
  table.formdata td {
   margin: 0;
   padding: 0;
   border: 1px solid #E2E2E2;
  }
  table.formdata input {
   width: 80px;
   padding: 2px 4px 2px 4px;
   margin: 0;
   border: 2px solid #ffffff;
  }
  .formdata input:focus {
   border: 2px solid #000000;
  }
</style>
